<template>
  <el-row>
    <el-col :span="8" :offset="8">
      <el-card>
        <el-form
          ref="form"
          :rules="rules"
          :model="form"
          status-icon
          :hide-required-asterisk="true"
          label-width="100px"
          class="login_title"
        >
          <h2 class="login_title">系统登陆</h2>
          <el-form-item label="用户名" prop="username">
            <el-input
              placeholder="请输入用户名"
              v-model="form.username"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              placeholder="请输入密码"
              v-model="form.password"
              show-password
            ></el-input>
          </el-form-item>
          <el-button type="primary" @click="submitForm('form')">登录</el-button>
        </el-form>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import Mock from "mockjs";
import Cookie from "js-cookie";
export default {
  name: "Login",
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          {
            min: 1,
            max: 15,
            message: "长度在 1 到 15 个字符",
            trigger: "blur",
          },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    //登录验证接口
    submitForm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          if (this.form.username == "admin" && this.form.password == "admin") {
            const data = {
              token: Mock.Random.guid(),
              menu: [
                {
                  path: "/home",
                  name: "home",
                  label: "首页",
                  icon: "s-home",
                  url: "Home",
                },
                {
                  path: "/mall",
                  name: "mall",
                  label: "商品管理",
                  icon: "video-play",
                  url: "Pagination",
                },
                {
                  path: "/user",
                  name: "user",
                  label: "用户管理",
                  icon: "user",
                  url: "User",
                },
                {
                  label: "其他",
                  icon: "location",
                  children: [
                    {
                      path: "/page1",
                      name: "page1",
                      label: "页面1",
                      icon: "setting",
                      url: "PageOne",
                    },
                    {
                      path: "/page2",
                      name: "page2",
                      label: "页面2",
                      icon: "setting",
                      url: "PageTwo",
                    },
                  ],
                },
              ],
            };
            //token,menu存入信息cookie
            Cookie.set("token", data.token);
            //Cookie.set("menu", data.menu);
            //store传参

            this.$store.commit("tabAbout/setMenu", data.menu);
            this.$store.commit('tabAbout/addMenu',this.$router)
            //跳转到首页

            this.$router.push("/home");
          } else {
            this.$message.error("用户名或密码输入错误");
          }
        } else {
          this.$message.error("请输入正确！！");
          return false;
        }
      });
    },
    verifMsg() {},
  },
};
</script>

<style lang="less" scoped>
.login_title {
  text-align: center;
}
.el-row {
  height: 100vh;
  background-image: url("../assets/download.svg");
  display: flex;
  align-items: center;
}
.el-col {
  position: relative;
  bottom: 10%;
}
.el-button {
  padding-inline: 50px;
}
</style>